<template>
  <div class="card">
    <div>
      <a-select :allowClear="true" placeholder="计划通道" class="inputStyle">
        <a-select-option v-for="item in channelType" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-input placeholder="银行名称" class="inputStyle"></a-input>
      <a-select v-model="formData.search.trade_type" class="inputStyle">
        <a-select-option
          v-for="item in [
            { id: 1, name: '消费' },
            { id: 2, name: '还款' }
          ]"
          :key="item.id"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-select v-model="formData.search.trade_status" class="inputStyle">
        <a-select-option
          v-for="item in [
            { id: 'C', name: '成功' },
            { id: 'B', name: '未执行' }
          ]"
          :key="item.id"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </div>
    <div style="margin: 10px 0">
      <a-range-picker v-model="dateValue" style="width: 410px" @change="onChange" show-time> </a-range-picker>
      <a-button type="primary" style="margin: 0 10px" @click="getList">查询</a-button>
      <a-button type="primary" @click="reset">重置</a-button>
    </div>
    <a-table
      :rowKey="(record, index) => index"
      expandRowByClick
      :pagination="false"
      @change="paginChange"
      style="border: 1px solid #e8e8e8"
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
    </a-table>
  </div>
</template>

<script>
import { format } from 'date-fns'
import { getPlanAPI, getBankListAPI } from '@/api/transaction.js'
export default {
  name: 'BankTurnover',
  data() {
    return {
      dateValue: [format(new Date(), 'yyyy-MM-dd 00:00:00'), format(new Date(), 'yyyy-MM-dd 23:59:59')],
      channelType: [],
      columns: [
        {
          title: '通道名称',
          dataIndex: 'channel_name',
          align: 'center'
        },
        {
          title: '银行名称',
          dataIndex: 'bank_name',
          align: 'center'
        },
        {
          title: '交易类型',
          dataIndex: 'trade_type',
          align: 'center'
        },
        {
          title: '当日初始银行交易量',
          dataIndex: 'daily_bank_turnover',
          align: 'center'
        },
        {
          title: '交易状态',
          dataIndex: 'trade_status',
          align: 'center'
        },
        {
          title: '交易量',
          dataIndex: 'trade_amount',
          align: 'center'
        }
      ],
      tableData: [],
      formData: {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          bank_name: '', // 银行名称
          brand_id: process.env.VUE_APP_BRAND_ID,
          channel_id: undefined, // 计划通道
          end_time: format(new Date(), 'yyyy-MM-dd 23:59:59'),
          start_time: format(new Date(), 'yyyy-MM-dd 00:00:00'),
          trade_status: 'C',
          trade_type: 1
        }
      }
    }
  },
  created() {
    this.getType()
    this.getList()
  },
  methods: {
    async getType() {
      const result = await getPlanAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: { type: 1 } })
      this.channelType = result.data
    },
    onChange(value, date) {
      this.formData.search.start_time = date[0]
      this.formData.search.end_time = date[1]
    },
    reset() {
      this.formData = {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          bank_name: '', // 银行名称
          brand_id: process.env.VUE_APP_BRAND_ID,
          channel_id: undefined, // 计划通道
          end_time: format(new Date(), 'yyyy-MM-dd 23:59:59'),
          start_time: format(new Date(), 'yyyy-MM-dd 00:00:00'),
          trade_status: 'C',
          trade_type: 1
        }
      }
      this.getList()
    },
    async getList() {
      const result = await getBankListAPI(this.formData)
      this.tableData = result.data
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
</style>
